<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>YUI Calendar - Handling Events (YUI Library)</title>

	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">

	<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
	<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>

<body>

	<div id="doc3" class="yui-t4">
		<div id="hd">
			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
			<h1>YUI Calendar: Handling Events</h1>
		</div>

		<div id="bd">

					<div id="toc" class="yui-b">
			<ul>
				<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>

<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item selected"><a href="1.html">Handling Events</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
			</ul>
		</div>
			<div id="yui-main">
				<div class="yui-b">
					<h1 class="first">Setting up the Calendar</h1>

								<p>Calendar provides several events to which an application can subscribe in order to react easily to changes in the state of the Calendar. The events provided are:</p>

			<ul class="properties">
				<li><strong>beforeRenderEvent</strong> - Fired prior to the rendering of the Calendar</li>
				<li><strong>renderEvent</strong> - Fired after the Calendar is rendered</li>
				<li><strong>beforeSelectEvent</strong> - Fired before a selection is made</li>
				<li><strong>selectEvent</strong> - Fired after a date selection is made. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]</li>
				<li><strong>beforeDeselectEvent</strong> - Fired before a deselection is made</li>
				<li><strong>deselectEvent</strong> - Fired after dates are deselected. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]</li>
				<li><strong>changePageEvent</strong> - Fired when the active Calendar page is changed</li>
				<li><strong>clearEvent</strong> - Fired when the Calendar is cleared. Calling <em>clear</em> on a Calendar removes all of its selections and sets the page to the current month and year.</li>
				<li><strong>resetEvent</strong> - Fired when the Calendar is reset. Calling a Calendar's <em>reset</em> method resets the Calendar to its original view and selection state.</li>
			</ul>

			<p>The events are each defined by YAHOO.util.CustomEvent, and are subscribed to using the <em>subscribe</em> method of CustomEvent. In this example, we will display an alert message each time a date is selected or deselected. The <em>selectEvent</em> and <em>deselectEvent</em> events will fire when selections and deselections are made via user interaction (eg, when a user clicks to select a date) or programatically (eg., if a script on the page executes the <em>select</em> method to select a date).</p>

			<textarea name="code" class="HTML" cols="60" rows="1">
					var mySelectHandler = function(type,args,obj) {
						var selected = args[0];
						alert("Selected: " + this._toDate(selected[0]));
					};

					var myDeselectHandler = function(type,args,obj) {
						var selected = args[0];
						alert("Deselected: " + this._toDate(selected[0]));
					};

					YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);

					YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true);

					YAHOO.example.calendar.cal1.render();
			</textarea>


					<div id="stepnav">
						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
				</div>
			</div>
		</div>

		<div id="ft">&nbsp;</div>
	</div>

	<script src="../../assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript">
		dp.SyntaxHighlighter.HighlightAll('code');
	</script>

</body>
</html>